<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style type="text/css">
		html,body{
			margin: 0;
		    padding: 0;
		    font-size: 12px;
		    font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif;
		    background: #fff;
		    color: #222;
		    min-width: 990px;
		    height: 100%;
		    tap-highlight-color: transparent;
		    -webkit-tap-highlight-color: transparent;
}

		}
		body{
			font-family: Calibri,Arial,Helvetica,sans-serifsans-serif;
			margin: 0;
			height: 100%;
		}
		ul{
			margin: 0;
		}
		ul li{
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		a{
			text-decoration: none;
			color: #000000;
			}
		#wrap{
			margin: 0;
		}	
		#wrap .header{
			margin: 0;
			height: 180px;
			width: 100%;
			background: url(img/top.jpg) no-repeat center;
			background-size:cover;
		}
		#wrap .header em{
			display: inline-block;
			font-style: normal;
			font-weight: normal;
			line-height: 50px;
			height: 42px;
			margin: 0 14px;
			padding-top: 8px;
		}
		#wrap .header .top{
			margin: 0;
		}
		#wrap .header .menu{
			width: 100%;
		}	
		#wrap .header .menu .nav-menu{
			width: 980px;
			margin: 0 auto;
			position: relative;
			top: 185px;
		}	
		#wrap .header .menu ul:after {
		    content: "";
		    display: block;
		    visibility: hidden;
		    height: 0;
		    clear: both;
		    font-size: 0;
		}
		#wrap>.header>.menu>.nav-menu>ul>li{
			float: left;
			font-weight: 500;
			height: 50px;
		}
		#wrap>.header>.menu>.nav-menu>ul>li:nth-child(1) a{
			background: url(img/icons.png) -644px -1169px no-repeat;;
		}
		#wrap>.header>.menu>.nav-menu>ul>li .v-num span{
			vertical-align:top;
			left: auto;
			position: static;
			display: inline-block;
			font-family: Calibri,Arial,Helvetica,sans-serifsans-serif;
			font-size: 11px;
			background: #ffafc9;
			border-radius: 4px;
			color: #fff;
			padding: 1px 3px;
		}
		
		#wrap>.header>.menu>.nav-menu>ul>li a{
			position: relative;
			display: block;
			font-size: 14px;
			color:#222;
			font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif;
		}
		#wrap>.header>.menu>.nav-menu>ul>li .v-num{
			position: absolute;
			top: 8px;
			left: 0;width: 100%;
			text-align: center;
			height: 14px;
		}
		#wrap .header .menu .nav-menu>ul>li>ul{
			display: none;
			position:absolute;
			top: 50px;
			border-bottom: 1px solid #f9f9f1;
			border-right: 1px solid #f9f9f1;
			border-left: 1px solid #f9f9f1;
			background: #fff;
			padding: 10px 10px;
			margin: 0;
			z-index: 1000;
			}
	    #wrap .header .menu .nav-menu li>ul li{
	    	list-style: none;
	    	color:#000000;
	    	padding-left: 13px;
	    	cursor: pointer;
	    	background: url(img/icons.png) -284px -2070px no-repeat ;
	    	}	
	    #wrap .header .menu .nav-menu>ul>li:hover ul{
	    	display:block;
	    	}		
		#wrap .header .square,.radios{
			margin: 0 ;
			height: 50px;
			padding:0;
			padding-left: 22px;
			font-size: 16px;
			background: url(img/icons.png) -664px -904px no-repeat;
		}
		#wrap .header .radios{
			margin: 0;
			height: 50px;
			padding:0;
			padding-left: 22px;
			background: url(img/icons.png) -664px -518px no-repeat;
		}
		.clr{
			clear: both;
		}
		#wrap .header .nav-right{
			position: absolute;
			right: 0;top:0;
			width: ;
			padding: 6px 0;
			height: 50px;
		}
		#wrap .header .nav-right a{
			display: inline-block;
			background:url(img/app-link.png) no-repeat;
			background-size: contain;
			width: 58px;
			height: 34px;
		}
		.main-body{
			margin:0 auto;
			width: 980px;
			margin-top: 70px;
		}
		.main-body .content-top .lunbo,.content-top-right{
			display: inline-block;
			} 
		.main-body .content-top .lunbo ul{
			margin: 0;
			padding: 0;
			width:3080px;
			position: absolute;
			height: 220px;
			left: -440px;
			}
		.main-body .content-top .lunbo ul li{
			height:220px ;
			width: 440px;
			float: left;
		}
		.main-body .content-top .lunbo{
			height: 220px;
			width: 440px;
			position: relative;
			overflow: hidden;
			}
		.main-body .content-top .lunbo .lunbo_icon{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10px;
					}	
		.main-body .content-top .lunbo .lunbo_icon span{
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius:100% ;
			background: #fff;
			}	
		.main-body .content-top .lunbo .lunbo_icon .on{
			background: red;
			}	
		.main-body .content-top .lunbo .pre,.next{
			display: none;
			padding: 3px;
			font-size: 40px;
			color: #FFFFFF;
			background: rgba(0,0,0,0.3);
			position: absolute;
			top: 50%;
			transform: translateY(-50%);	
			}
		.main-body .content-top .lunbo .pre{
			left: 0;
			}
		.main-body .content-top .lunbo .next{
			right: 0;
			}	
		.content-top-right{
			width: 536px;
			height: 220px;
			overflow: hidden;
			}	
			.content-top-right ul{
				padding: 0;
				padding-left: 18px;
				width: 540px;
			}
		.content-top-right ul li{
				float: left;
				width: 180px;
				height:100px;
				margin-bottom: 20px;
			}	
		.content-top-right ul li img{
			   width: 160px;
			   height: 100%;
			   border-radius: 4px;
			}	
		.content-top-right ul:after{
			content: "";
		    display: block;
		    visibility: hidden;
		    height: 0;
		    clear: both;
		    font-size: 0;
			}		
		</style>
		<link rel='stylesheet' href="css/index.css" />
		<script data-main='js/main'  src="js/plugin/require.js"></script>
		
	</head>
	<body>
		<div id="wrap">
			<div class="header">
				<div class="top" id="content">
					
				</div>
				<div class="menu">
					<div class='nav-menu'>
						<ul style="margin: 0;padding: 0;">
							<li style="margin-left: -17px;"><a href="#"><em>首页</em></a></li>
							<li><a href="#"><em>动画</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>番剧</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>音乐</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>舞蹈</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>游戏</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>科技</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>生活</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>鬼畜</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>时尚</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>娱乐</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li><a href="#"><em>影视</em><div class="v-num"><span>122</span></div></a>
								<ul>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
									<li>MAD-AVA</li>
								</ul>
							</li>
							<li style="margin:0 12px 0 14px"><a href="#"><em class="square">广场</em></a>	</li>
							<li><a href="#"><em class="radios">直播</em></a></li>
						</ul>
						<div class="nav-right">
							<div>
								<img src="img/twoperson.gif" style="width:76px;height:44px;" />
								<a href="#"></a>
							</div>			
						</div>
					</div>
				</div>
			</div>
			<div class="main-body">
				<div class="content-top">
					<div class="lunbo">
						<ul>
							<li><img src="img/5.jpg"></li>
							<li><img src="img/1.jpg"></li>
							<li><img src="img/2.jpg"></li>
							<li><img src="img/3.jpg"></li>
							<li><img src="img/4.jpg"></li>
							<li><img src="img/5.jpg"></li>
							<li><img src="img/1.jpg"></li>
						</ul>
						<div class="lunbo_icon">
							<span class="on"></span>
							<span></span>
							<span></span>
							<span></span>
							<span></span>
						</div>
						<div class="next">&gt;</div>
						<div class="pre">&lt;</div>
					</div>
					<div class='content-top-right'>
						<ul>
							<li>
								<img src="img/small1.jpg" />
							</li>
							<li>
								<img src="img/small2.jpg" />
							</li>
							<li>
								<img src="img/small3.jpg" />
							</li>
							<li>
								<img src="img/small4.jpg" />
							</li>
							<li>
								<img src="img/small5.jpg" />
							</li>
							<li>
								<img src="img/small6.jpg" />
							</li>
						</ul>
					</div>
				</div>
				<!--
                	推广开始
                -->
				<div class="extend">
				    <div class="left">
						<div class="text">
							<div class="extendlogo"><h2>推广</h2></div>
							<span>一大波角虫接近中(๑•̀ㅂ•́)و✧</span>
							<span style="border-left: 1px solid #ccc;padding-left: 7px;margin-left: 7px;">什么？厨房被小电视们占领了꒰꒪д꒪|||</span>
						</div>
						<div class="oContent">
							<ul>
								<li>
									<div>
										<img src="img/e1.jpg" />
										<div>06:00</div>
									</div>
									<p>魅蓝 E 全网首发评测</p>
								</li>
								<li>
									<div>
										<img src="img/e2.jpg" />
										<div>06:00</div>
									</div>
									<p>信誓蛋蛋 | 湿身对决！来啊！皮蛋</p>
								</li>
								<li>
									<div>
										<img src="img/e3.jpg" />
										<div>06:00</div>
									</div>
									<p>【Jordan定格】精采重播之一拳超人 - 守</p>
								</li>
								<li>
									<div>
										<img src="img/e4.jpg" />
										<div>06:00</div>
									</div>
									<p>【冰瞳魔羽】最强宝可梦 KID！</p>
								</li>
							</ul>
						</div>
					</div>
					<div class="right">
						<div class="produce">
							<span>在线人数：29999</span>
							<span style="margin: 0 5px;font-size: 5px;">|</span>
							<span>最新投稿：2406</span>
						</div>
						<div class="img"><img src="img/eRight.jpg" style="width: 100%;height: 100%;"></div>
					</div>
				</div>
				<!--推广结束-->
				<div class="guodu">
					<img src="img/guodu.jpg" />
				</div>
				<!--直播开始-->
				<div class="zhibo">
					<div class="left">
						<div class="top">
							<div class="top-left">
								<span class="bg"></span>
								<span style="font-size: 20px;color: #000;">正在直播</span>
								<span style="color: #99a2aa;margin-left: 10px;">当前共有2050个在线直播</span>
							</div>
							<div class="top-right">
								<div class="newtrends">
									<span class="tongbu" ></span>
									<span >231条新动态</span>
								</div>
								<span><a>更多&gt;</a></span>
							</div>
						</div>
						<div class="down">
							<div class="img">
								<ul>
									<li>
										<div style="position: relative;">
											<div><img src="img/zhibo/1.jpg"></div>
											<div >微微一笑很烦人</div>
											<div class="text">
												<span></span>
												<span>七兮兮</span>
												<span></span>
												<span>5013</span>
											</div>
											<div><img src="img/zhibo/11.jpg"></div>
										</div>
									</li>
									<li>
										<div style="position: relative;">
											<div><img src="img/zhibo/2.jpg"></div>
											<div >参考手册进行浏览器测试</div>
											<div class="text">
												<span></span>
												<span>wudaad</span>
												<span></span>
												<span>5013</span>
											</div>
											<div><img src="img/zhibo/21.jpg"></div>
										</div>
									</li>
									<li>
										<div style="position: relative;">
											<div><img src="img/zhibo/3.jpg"></div>
											<div >后代选择器 CSS 相邻兄弟</div>
											<div class="text">
												<span></span>
												<span>牛三个兮</span>
												<span></span>
												<span>5013</span>
											</div>
											<div><img src="img/zhibo/31.jpg"></div>
										</div>
									</li>
									<li>
										<div style="position: relative;">
											<div><img src="img/zhibo/4.jpg"></div>
											<div >在最近的web开发中是不是就会</div>
											<div class="text">
												<span></span>
												<span>猪大头</span>
												<span></span>
												<span>5013</span>
											</div>
											<div><img src="img/zhibo/41.jpg"></div>
										</div>
									</li>
									<li>
										<div style="position: relative;">
											<div><img src="img/zhibo/5.jpg"></div>
											<div >全浏览器支持的css选择器</div>
											<div class="text">
												<span></span>
												<span>小鬼大头</span>
												<span></span>
												<span>5013</span>
											</div>
											<div><img src="img/zhibo/51.jpg"></div>
										</div>
									</li>
									<li>
										<div style="position: relative;">
											<div><img src="img/zhibo/6.jpg"></div>
											<div >择器是CSS的核心,从最初的元</div>
											<div class="text">
												<span></span>
												<span>吃饭哈兮</span>
												<span></span>
												<span>5013</span>
											</div>
											<div><img src="img/zhibo/61.jpg"></div>
										</div>
									</li>
									<li>
										<div style="position: relative;width: 160px;overflow: hidden;">
											<div><img src="img/zhibo/7.jpg"></div>
											<div >定位页面上的任意元素</div>
											<div class="text">
												<span></span>
												<span>无敌啊兮</span>
												<span></span>
												<span>5013</span>
											</div>
											<div><img src="img/zhibo/71.jpg"></div>
										</div>
									</li>
									<li>
										<div style="position: relative;width: 160px;overflow: hidden;">
											<div><img src="img/zhibo/8.jpg"></div>
											<div >微微一笑很烦人</div>
											<div class="text">
												<span></span>
												<span>轮播啊啊</span>
												<span></span>
												<span>5011</span>
											</div>
											<div><img src="img/zhibo/81.jpg"></div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!--直播左半部分结束-->
					<div class="right">
						<div style="height: 48px;line-height: 46px;">
							<span>直播排行</span>
							<span>关注的直播</span>
							<span>为您推荐</span>
						</div>
						<div ><img src="img/zhibo/zright.jpg"></div>
						<p>中秋余额四俺开放后开始阿发阿达</p>
					</div>
				</div>
				<!--直播结束-->
				
				<!--创作大赛-->
				
			</div>
			<!--下面部分结束-->
		</div>
	</body>
	
	
</html>
